/*清洗线大屏*/
<template>

<dv-full-screen-container class="background">
    <starBackground></starBackground>
    <dv-loading v-if="IsLoading == 1">Loading...</dv-loading>
    <div class="m-data-screen">
        <div class="header">
            <div class="header-bg-title">DI数据大屏</div>
            <div class="date">{{ timeDate }} {{ hourTime }}</div>
            <div v-show="false" class="headerleft">{{ timeDate }} {{ hourTime }}</div>
        </div>

        <div class="content">
            <div class="flex-col-3">
                <div class="content">
                    <BorderBox1>
                        <div style="display: flex;width: 100%;height: 100%; 
                            flex-direction: column;padding: 30px;">
                           
                            
                            <el-table :data="tableData"  style="width: 100%;background-color: transparent;"
                            :header-row-style = "headerRowStyle"
                            :header-cell-style="headerStyle"
                            :cell-style = "callCellStyle"
                            :row-style = " contentRowStyle"

                            >
                                <el-table-column prop="Code" label="工位编号" />
                                <el-table-column prop="Name" label="工位名称" />
                                <el-table-column prop="State" label="状态" />
                                <el-table-column prop="OkCount" label="OK数量" />
                                <el-table-column prop="NgCount" label="NG数量" />
                            </el-table>


                        </div>
                    </BorderBox1>
                </div>
             
            </div>

            <div class="flex-col-7">
                <div class="content-col">
                    <div style="display: flex;flex: 1; flex-direction:unset;box-sizing: border-box;overflow: hidden;">
                        <BorderBox1>
                            <div style="width: 100%;height: 100%;display: flex;flex-direction: column;">
                                <div class="subtitle">OEE</div>
                                <div style="flex: 1 ;display: flex;
                                justify-content: center;align-items: center;
                                font-size: 3vw;
                                padding-bottom: 30px;">   <oee/>  </div>
                            </div>
                          
                        </BorderBox1>
                        <BorderBox1>
                            <div style="width: 100%;height: 100%;display: flex;flex-direction: column;">
                                <div class="subtitle">OK总量</div>
                                <div style="flex: 1 ;display: flex;
                                justify-content: center;align-items: center;
                                font-size: 3vw;
                                padding-bottom: 30px;"> 1399  </div>
                            </div>
                        </BorderBox1>
                        <BorderBox1>
                            <div style="width: 100%;height: 100%;display: flex;flex-direction: column;">
                                <div class="subtitle">NG总量</div>
                                <div style="flex: 1 ;display: flex;
                                justify-content: center;align-items: center;
                                font-size: 3vw;
                                padding-bottom: 30px;"> 0  </div>
                            </div>
                        </BorderBox1>
                    </div>
                   <!-- 第2行 各个工站的实时工艺 -->
                    <div style="display: flex;flex: 1; flex-direction:unset;overflow: hidden;gap: 3px;">
                        <BorderBox7 style="display: flex; flex: 1;">
                                    <moldposition title="工装存放1"/>
                        </BorderBox7>
                        <BorderBox7 style="display: flex; flex: 1; ">
                                    <moldposition title="工装存放2"/>
                        </BorderBox7>
                    </div>
                    <div style="display: flex;flex: 1; flex-direction:unset;overflow: hidden;gap: 3px;">
                        <!-- <BorderBox8>
                                    OP20
                        </BorderBox8> -->
                        <div class="item-complex2">
                                    OP20
                        </div>
                        <div class="item-complex2">
                                    OP30
                        </div>
                    </div>
                </div>
               
            </div>
        </div>
       
       
    </div>
</dv-full-screen-container>
</template>

<script setup>
import FullScreenContainer from '@/views/components/dataScreen/full-screen-container.vue'
import starBackground from '@/views/components/starBackground.vue'
import { BorderBox1,BorderBox7,BorderBox8 } from '@kjgl77/datav-vue3'
import oee from './components/oee.vue'
import moldposition from './components/moldPosition.vue'
const { proxy } = getCurrentInstance()
const SR  = proxy.signalr.SR
const timeDate = ref()
const hourTime = ref()
const time1 = ref()
const getHour = () => {
  let date = new Date()
  let hour = date.getHours().toString().padStart(2, '00')
  let minute = date.getMinutes().toString().padStart(2, '00')
  let second = date.getSeconds().toString().padStart(2, '00')
  hourTime.value = `${hour}:${minute}:${second}`
  time1.value = setTimeout(() => {
    time1.value && clearTimeout(time1.value)
    getHour()
    //changeData()
  }, 1000)
}

const getNowTime = () => {
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  timeDate.value = `${year}年${month}月${day}日`
  getHour()
}
onMounted(() => {
  getNowTime()
  setTimeout(() => {
    IsLoading.value = 0;
  }, 300);
})
onBeforeUnmount(() => {
  time1.value = null
})

const IsLoading = ref(1)


const tableData = reactive([
    { 
        Code:"OP20",Name:"工位名称",State:"在线",OkCount:0,NgCount:0
    },
    { 
        Code:"OP30",Name:"工位名称",State:"在线",OkCount:0,NgCount:0
    }
])

const headerStyle = {
    "background-color":"rgba(61, 73, 109, 0.209)"
}
const headerRowStyle = {
    "background-color":"#041c4a",
    "font-size":"0.9vw"
}

const callCellStyle = (data)=>{
    let columnIndex = data.columnIndex

    return {  "background-color":"#041c4a"}
}

const contentRowStyle = {
    "background-color":"#041c4a",
    "font-size":"0.9vw"
}

onMounted(() => {
  window.addEventListener('beforeunload', handleBeforeUnload);

  proxy.signalr.Event.RegistOP10 = ()=>{
    SR.invoke('globalRequest',1)
    SR.off('globalReceive') 
    SR.on("globalReceive", (data) => {
        //console.log("op10Receive",data) 
        let entraceArr = []
        let outArr = []
        for(let a of data.entraceLineDatas)
        {
            entraceArr.push([ a.name,a.count ])
        }
        for(let a of data.outLineDatas)
        {
            outArr.push([ a.name,a.count ])
        }
        //console.log("op10Receive",entraceArr)
        Object.assign(tableData1.data,entraceArr) 
        Object.assign(tableData2.data,outArr) 
        let deviceAlarmArr = []

        // if(data.deviceAlarm.length === 0 )
        //     alarmData1.data.length = 0

        
         //   alarmData1.data.length = 0

         //先检查需要删除的项 
         for (let i = 0; i < alarmData1.data.length; i++) {
            let str = alarmData1.data[i][0]
            if (data.deviceAlarm.findIndex(x=>x === str ) <0  ) {
                alarmData1.data.splice(i, 1);
                i--; // 由于删除了一个元素，需要将索引回退一位
            }
        }

        for(let b of data.deviceAlarm)
        {
            if(alarmData1.data.findIndex(a=> a[0] === b ) <0 )
            {

                //console.log('添加', alarmData1.data,alarmData1.data.indexOf( [b]))
                alarmData1.data.push([b])
                //debugger
            }
        }
        
        //先检查需要删除的项 
        for (let i = 0; i < alarmData2.data.length; i++) {
            let str = alarmData2.data[i][0]
            if (data.ageAlarm.findIndex(x=>x === str ) <0  ) {
                alarmData2.data.splice(i, 1);
                i--; // 由于删除了一个元素，需要将索引回退一位
            }
        }

        for(let b of data.ageAlarm)
        {
            if(alarmData2.data.findIndex(a=> a[0] === b ) <0 )
            {

                //console.log('添加', alarmData1.data,alarmData1.data.indexOf( [b]))
                alarmData2.data.push([b])
                //debugger
            }
        }




        
    }) 
    console.log('全站大屏注册通信完成')
  }
  SR.onreconnected((connectionId) => {
      
      console.log('大屏断线重新连接成功' + connectionId)
      SR.invoke('globalRequest',1)
    })
  proxy.signalr.Event.RegistOP10()
 
});
 
onUnmounted(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload);
});
 
function handleBeforeUnload(event) {
  // 这里可以执行你的清理或保存操作
 
  SR.invoke('globalRequest',0)
  proxy.signalr.Event.RegistOP10=()=>{}
 // event.preventDefault(); // 注意：在某些浏览器中，如果你调用了 preventDefault，可能会显示一个对话框询问用户是否真的要离开。
  event.returnValue = ''; // Chrome 需要这个返回值来阻止对话框显示
}


// pnpm install @dataview/datav-vue3  pnpm install @jiaminghi/data-view
//npm uninstall @jiaminghi/data-view pnpm uninstall @dataview/datav-vue3
</script>

<style lang='scss' scoped>

:deep(.rowclass)
{
   // background-color: #030409;
    color: white;
    font-size: 1vw;
}

.subtitle{
    font-size: 2vw;
}

:deep(.el-table)
{
  // background-color: transparent;
  color: #c7d2e9;
    --el-table-border-color:transparent;
}

:deep(.dv-scroll-board .rows){
    border-radius: 10px;
    overflow: hidden;
}
:deep(.dv-scroll-board .rows .row-item){
    background-color: rgba(61, 73, 109, 0.209) !important;
    font-size:2vw;
}
:deep(.dv-scroll-board .rows .row-item>div:nth-child(1) ){
    width: 70% !important;
}
:deep(.dv-scroll-board .rows .row-item>div:nth-child(2) ){
    color: rgb(163 175 152) !important;
    width: 29% !important;
}

:deep(div[tag="alarm"] > .dv-scroll-board .rows .row-item){
    background-color: red !important;
    font-size:1.5vw;
}

:deep(div[tag="alarm"] > .dv-scroll-board .rows .row-item>div:nth-child(1) ){
    width: 90% !important;
}

.background
{
    background-color: #030409;
    color: white;
    
}


.content
{
    display: flex;
    justify-content:space-between;
    flex: 1;
    padding-bottom: 10px;
    box-sizing: border-box;
}
.content-col
{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-bottom: 10px;
    gap: 7px;
    box-sizing: border-box;

}

.flex-col
{
    display: flex;
    flex: 1;
    padding: 20px;
    flex-direction: column;
    .content{
        display: flex;
        flex: 7.5;
    }
    .root{
        display: flex;
        flex: 2.5;
        padding-bottom: 10px;
    }
}

.flex-col-3
{
    display: flex;
    flex: 3;
    padding: 20px;
    flex-direction: column;
}

.flex-col-7
{
    display: flex;
    flex: 7;
    padding: 20px;
    flex-direction: column;
}


.item-complex2
{
    flex: 1;
    display: flex;
      background-image: url('@/assets/images/charts/charts-bg.png');
      background-color: #042750;
      background-size: 100% 100%;
      background-repeat: no-repeat;
}

</style>
<style lang="scss" scoped>
 @use './index.scss';
</style>

<style scoped>
*{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    ms-user-select: none;
}
</style>